<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color: red;
            /*需要过渡的属性*/
            transition-property: all;
            /*过渡的时间，默认是0*/
            transition-duration: 3s;
            /*延迟几秒后执行，默认是0*/
            transition-delay: 1s;
            /*规定过渡效果的曲线，默认是ease:慢>快>慢
                其他: ease-in:慢速开始
                     ease-out:慢速结束
                     ease-in-out:慢>快>慢
                     linear：匀速
            */
            transition-timing-function: linear;
        }

        .box:hover{
            background-color: blue;
            margin-left:500px;
        }
    </style>
</head>
<body>
    <div class = "box"></div>
</body>
</html>
